<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
// import echarts from 'echarts'
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import anhui from './mapData.json'

const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '600px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
        console.log("anhui",anhui)
        
        this.chart = echarts.init(this.$el, 'macarons')
        
        var geoCoordMap = {
            '合肥': [117.283042, 31.86119], // 在此细调光点位子 横坐标 纵坐标
            '芜湖': [118.176451, 31.326319],
            '蚌埠': [117.363228, 33.239667],
            '淮南': [117.018329, 32.647574],
            '马鞍山': [118.507906, 31.689362],
            '淮北': [116.794664, 33.971707],
            '铜陵': [117.816576, 30.929935],
            '安庆': [116.543551, 30.50883],
            '黄山': [118.317325, 29.709239],
            '滁州': [118.316264, 32.303627],
            '阜阳': [115.819729, 32.896969],
            '宿州': [117.294084, 33.933891],
            '六安': [115.907676, 31.752889],
            '亳州': [115.782939, 33.869338],
            '池州': [117.109157, 30.215667],
            '宣城': [118.957995, 30.915667]
        }
        var alirl = [
        { name: '合肥', value: { '派单量': 40, '恢复量': 90 } },
        { name: '芜湖', value: { '派单量': 40, '恢复量': 90 } },
        { name: '蚌埠', value: { '派单量': 40, '恢复量': 90 } },
        { name: '淮南', value: { '派单量': 40, '恢复量': 90 } },
        { name: '马鞍山', value: { '派单量': 40, '恢复量': 90 } },
        { name: '淮北', value: { '派单量': 40, '恢复量': 90 } },
        { name: '铜陵', value: { '派单量': 40, '恢复量': 90 } },
        { name: '安庆', value: { '派单量': 40, '恢复量': 90 } },
        { name: '黄山', value: { '派单量': 40, '恢复量': 90 } },
        { name: '滁州', value: { '派单量': 40, '恢复量': 90 } },
        { name: '阜阳', value: { '派单量': 40, '恢复量': 90 } },
        { name: '宿州', value: { '派单量': 40, '恢复量': 90 } },
        { name: '六安', value: { '派单量': 40, '恢复量': 90 } },
        { name: '亳州', value: { '派单量': 40, '恢复量': 90 } },
        { name: '池州', value: { '派单量': 40, '恢复量': 90 } },
        { name: '宣城', value: { '派单量': 40, '恢复量': 90 } }
        ]
        var convertData = function (data) {
            var res = []
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name]
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    })
                }
            }
            return res
        }
        echarts.registerMap('anhui', anhui);
        var option = {
            // backgroundColor: '#03213D',
            animation: false,
            // 地图背景颜色
            tooltip: {
                trigger: 'item'
            },
            geo3D: {
                map: 'anhui',
                show: true,
                // top: -10,
                viewControl: {
                    // autoRotate: true,
                    distance: 150,
                    center: [-2, -5, 0]
                },
                itemStyle: {
                    // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
                    color: 'rgba(10, 133, 171, 0.5)',
                    // opacity: 0.5,
                    borderWidth: 0.8,
                    borderColor: '#07dde2',
                    
                },
                
                label: {
                    show: true,
                    color: '#fff', // 地图初始化区域字体颜色
                    fontSize: 12,
                    opacity: 1,
                    backgroundColor: 'rgba(0,0,0,0)',
                    formatter: function ({name}) {
                        console.log(name)
                        return `${name} ` //注意name后加了空格
                    },
                    emphasis: {
                        color: '#ffffff',
                        show: true
                    }
                },
                emphasis: { // 当鼠标放上去  地区区域是否显示名称
                    label: {
                        show: true,
                        textStyle: {
                            color: '#f9b207',
                            fontSize: 12
                        }
                    },
                    itemStyle: {
                        color: '#ff7f00',
                        opacity: 1

                    }
                },
                // shading: 'lambert',
                light: { // 光照阴影
                    main: {
                    color: 'rgba(0,0,0,0)', // 光照颜色
                    intensity: 1.2, // 光照强度
                    // shadowQuality: 'high', //阴影亮度
                    shadow: false, // 是否显示阴影
                    alpha: 55,
                    beta: 10

                    },
                    ambient: {
                    intensity: 0.3
                    }
                }
            },
            series: [
                {
                    type: 'scatter3D',
                    coordinateSystem: 'geo3D',
                    symbol: 'pin',
                    symbolSize: 20,
                    opacity: 1,
                    itemStyle: {
                    borderWidth: 0.5,
                    borderColor: '#fff'
                    },
                    zlevel: 10,
                    emphasis: {
                        label: {
                            show: true,
                            position: 'center',
                            backgroundColor: 'red',
                            textStyle: {
                                color: '#fff',
                                fontSize: 14,
                                backgroundColor: '#02172d'
                            },
                            formatter: function (res) {
                                return '\n' + res.name + '   : 派单量:' + res.value[2]['派单量'] + '    恢复量:' + res.value[2]['恢复量'] + '\n'
                            }
                        }
                    },
                    data: convertData(alirl).map((it) => {
                        return {
                            // 数组新增2，代表z轴距离
                            name: it.name, 
                            value: [it.value[0], it.value[1], it.value[2]],
                            itemStyle: {
                                normal: {
                                    //  打点
                                    color: '#f9b207', // 如果想颜色不一样 就换成这个，并且 在上面color数组中修改，添加想要的颜色，--colorF()
                                    areaColor: '#f9b207'
                                }
                            }
                        }
                    })
                },
                {
                    type: 'lines3D',
                    coordinateSystem: 'geo3D',
                    effect: { // 尾迹线(动画线)
                    show: true,
                    trailWidth: 2, // 宽度
                    trailOpacity: 0.5, // 透明度
                    trailLength: 0.5, // 尾迹线长度
                    constantSpeed: 20, // 速度
                    period: 4 // 箭头指向速度，值越小速度越快
                    },
                    blendMode: 'lighter',
                    lineStyle: { // 参考线
                    color: '#f9b207',
                    width: 2,
                    opacity: 0.05
                    },
                    z: 3,
                    data: [
                    [
                        [117.283042, 31.86119],
                        [118.376451, 30.926319]
                    ],
                    [
                        [117.283042, 31.86119],
                        [117.363228, 33.239667]
                    ],
                    [
                        [117.283042, 31.86119],
                        [117.018329, 32.647574]
                    ],
                    [
                        [117.283042, 31.86119],
                        [118.507906, 31.689362]
                    ],
                    [
                        [117.283042, 31.86119],
                        [116.794664, 33.971707]
                    ],
                    [
                        [117.283042, 31.86119],
                        [117.489157, 29.956037]
                    ],
                    [
                        [117.283042, 31.86119],
                        [119.757995, 30.945667]
                    ]
                    ]
                }
            ]
        }
        console.log("option",option)
        this.chart.setOption(option);
    }
  }
}
</script>
